<!-- 修改价格弹窗 -->
<template>
	<view class="containerBox">
		<uni-popup ref="showRight" type="left" style="background-color: #fff;">
			<view class="scroll-view" style="position: relative;height: 100%;width: 100vw">
				<view class="close" style="text-align: right;padding-top: 25rpx;padding-right: 25rpx;">
					<image style="width: 50rpx;height: 50rpx;" @click="closeDrawer('showRight')" src="/static/close.png"
						mode=""></image>
				</view>
				<view class="my-index-userpop-box">
					<view class="" style="padding-left: 20rpx;color:#818181">
						<text>请修改价格:(原始价格:  {{placeholder}})</text>
					</view>
					<view class="dialog-content" style="">
						<view class="name">
							<!-- /-->
							<input
							:adjust-position="false"
							 placeholder-style="color:#DEDEDE"
							 :hold-keyboard="true"
							 @blur="inputValueKewordBlur" 
							 :focus="focus"
								 class="input" 
								@input="inputChange" 
								type="number" 
								v-model="inputVlaueKeywords" 
								@confirm="dialogInputConfirm"
								>
						</view>
						<view class="" style="display:flex;justify-content: flex-end;margin-bottom: 30rpx;">
							<checkbox-group @change="checkboxChange($event)">
								<label>
									<checkbox style="transform: scale(0.8);" :value="objectEdit.cInvName"
										:checked="isCheckedBox" />更新商品价格
								</label>
							</checkbox-group>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view-box" scroll-y="true" style="width: 100%;background-color: #f5f5f5">
					<view style="display: flex;padding: 10rpx;">
						<button @click="customerChangeClick"
							style="width:100%;display: flex;align-items: center;justify-content: center;background-color: #fff;">
							<uni-icons type="staff-filled" size="20"></uni-icons>
							<view class="textOverflow">
								{{popupKewords?popupKewords:'选择客户查询历史售价'}}
							</view>
						</button>
					</view>
					<view class="scrollView" style="padding: 10rpx 35rpx;">
						<!-- <view style="margin-bottom: 10rpx;border-bottom: 1px solid #E8E8E8; padding: 20rpx 0;" class=""  v-for="(item,index) in customerList" :key="index">
							<text>{{item.cCusName}}</text>
						</view> -->
						<view class=""
							style="display: flex;justify-content: space-between;;border-bottom: 1px solid #DBDBDB;padding-bottom: 20rpx;">
							<text>价格</text>
							<text>时间</text>
						</view>
						<view
							style="display: flex;justify-content: space-between;border-bottom: 1px solid #DBDBDB;padding: 25rpx 0;"
							class="" v-for="(item,index) in customerList" :key="index"
							@click="customerListClick(item,index)">
							<view class="" style="">
								<text style="" :class="{'active':selectIndex == index}"><text>￥</text>
									{{item.Price}}</text>
							</view>
							<text>{{item.CreateTime}}</text>
						</view>
						<leruge-empty v-if="customerList.length==0" text="暂无记录" type="minus" width="220rpx"
							height="220rpx"></leruge-empty>
					</view>
				</scroll-view>
				<button class="confirmBtn" type="primary" @click="dialogInputConfirm">确定</button>
				<!-- <view class="submitButton" style="">
					<view @click="dialogInputConfirm" class="confirm">确定</view>
				</view> -->
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// 引入工具函数
	import util from '../../util/util.js'
	// 引入暂无提示
	import lerugeEmpty from '@/components/empty/empty.vue'
	export default {
		props: {
			parentObj: {
				type: Object
			},
			CustomerId: {
				type: String
			}
		},
		components: {
			lerugeEmpty
		},
		data() {
			return {
				// 是否自动获取焦点
				focus:true,
				//输入框默认显示
				placeholder:"",
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0,
				queryParam: {
					"Condition": "cCusName",
					"Keyword": "",
					"SupplieId": uni.getStorageSync('CompanyInfo').Id,
				},
				widtthDrawer: null,
				// 选中的记录列表
				selectIndex: 0,
				customerList: [],
				popupKewords: "",
				// 输入的关键字
				inputVlaueKeywords: "",
				// 是否选中
				isCheckedBox: false,
				// 修改的产品参数
				objectEdit: {},
				newPlaceholder:"",
				// 点击修改的商品传递过来的商品id
				Id: "",
				// 传递过来的公司id


			}
		},
		mounted() {
			// this.getHistoricalDetail()
		},
		methods: {
			// 修改价格实时输入事件
			inputChange(e) {
				// console.log('子组件传递过来的实时输入事件', e)

			},
			// 修改价格输入框获取焦点事件
			inputValueKewordFocus(){
				let newPlaceholder = this.placeholder
				console.log('获取placeholder', this.placeholder, this.inputVlaueKeywords)
				// 获取焦点清空placeholder
				this.placeholder=""
				this.setPlaceholder(newPlaceholder)
			},
			setPlaceholder(newPlaceholder){
				this.newPlaceholder=newPlaceholder
			},
			// 修改价格输入框失去焦点事件
			inputValueKewordBlur(){
				console.log('第一次离开焦点',this.focus)
				this.focus=false
				console.log('第二次离开焦点',this.focus)
				// this.placeholder = this.newPlaceholder
			},
			
			// 修改价格是否选中更新商品价格
			checkboxChange(event) {
				console.log('当前选中', event.detail.value, this.focus)
				if (event.detail.value.length == 0) {
					// 说明取消选中
					this.isCheckedBox = false
				} else {
					this.isCheckedBox = true
				}
				
				this.focus=true
				console.log('是否选中了是否选中了是否选中了是否选中了', this.isCheckedBox, this.focus)
			},

			setCustomerList(list) {
				console.log('获取传递过来的父组件的数组获取传递过来的父组件的数组获取传递过来的父组件的数组', this.customerList, list)
				// 赋值传递过来的历史价格记录列表数据
				this.customerList = list
			},


			// 修改价格弹窗搜索取消
			cancelPopup() {
				this.popupKewords = ""
			},
			// 修改价格弹窗搜索确定
			searchConfrimPopup() {
				console.log('弹窗确定了', this.popupKewords)
			},
			// 客户搜索框获取焦点事件
			focusSearchChange() {
				this.$emit('focusSearchChange', 'openOrder')
			},
			// 修改价格弹窗取消
			dialogInputCancel() {
				this.$refs.showRight.close()
			},
			// 修改价格历史记录列表点击事件
			customerListClick(item, index) {
				this.selectIndex = index
				this.inputVlaueKeywords = Number(item.Price)
			},
			// 修改价格弹窗确定事件
			dialogInputConfirm() {
				console.log('弹窗确定了11', this.inputVlaueKeywords)
				console.log('弹窗确定了222', this.placeholder)
				if(!this.inputVlaueKeywords){
					// 如果什么都没有输入直接退出弹窗
					this.closeDrawer()
				}else{
					this.$emit('dialogInputConfirm', this.inputVlaueKeywords)
					// 关闭弹窗
					this.closeDrawer()
					
					// 清空input自动选中  否则再次进来不会自动获取焦点
					
					console.log('是否清空input',this.focus)
					
				}
			},

			// 选择客户
			customerChangeClick() {
				uni.navigateTo({
					url: "/pages/Information/page/Customer?openOrder='openOrder'"
				})
			},


			// 关闭弹窗
			closeDrawer() {
				this.focus=false
				// 弹窗
				this.$refs.showRight.close()
			},

			openForm(Id) {
				// 弹窗
				this.$refs.showRight.open()
				this.popupKewords = ''
				this.customerList = []
				this.Id = Id
				this.selectIndex = null
				console.log('出阿迪过来的商品id', this.Id)
				console.log('获取vuex里的客户id', this.$store.state.customerId)
				console.log('打开弹窗是否自动获取焦点了',this.focus)
				// 让输入框自动获取焦点
				this.focus=true
				// 清空客户历史列表
				this.customerList=[]
				// 获取客户列表数据
				// this.getAppCusinfoData()
			}
		}
	}
</script>

<style scoped lang="less">
	.containerBox {
		.textOverflow {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.confirmBtn{
			position: fixed;
			right: 30rpx;
			bottom: 30rpx;
			width: 220rpx;
		}
		.scroll-view {
			background-color: #fff;
			display: flex;
			flex-direction: column;

			// padding: 20rpx;
			.submitButton {
				background-color: #f5f5f5;
				position: fixed;
				bottom: 0;
				width: 100%;
				left: 0;
				padding: 20rpx;
				box-sizing: border-box;
				border-top: 1px solid #f5f5f5;

				button {
					float: right;
					width: 220rpx;
				}

				// height: 120rpx;
				// /*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
				// height: calc(130rpx + constant(safe-area-inset-bottom));
				// /* 直接扩展高度，因为padding-bottom是内边距 */
				// height: calc(130rpx + env(safe-area-inset-bottom));
				// // padding-top: 15rpx;
				// /* 直接扩展高度 */
				// box-sizing: border-box;
				// padding-bottom: constant(safe-area-inset-bottom);
				// /*兼容 iOS<11.2 */
				// padding-bottom: env(safe-area-inset-bottom);
				// padding-top: 20rpx;
				// border-top: 1px solid #DBDBDB;

				.cancel {
					color: #8E8E8B;
					border: 1px solid #8E8E8B;
					border-radius: 10rpx;
					height: 80rpx;
					width: 150rpx;
					text-align: center;
					line-height: 80rpx;
				}

				.confirm {
					background-color: #5272EF;
					border-radius: 10rpx;
					color: #fff;
					height: 80rpx;
					width: 150rpx;
					text-align: center;
					// line-height: 80rpx;
					// float: right;
					margin-right: 50rpx;
				}
			}

			.my-index-userpop-box {
				box-sizing: border-box;
				border-radius: 17rpx;
				margin: 0 auto;

				.dialog-content {
					padding: 0 20rpx;

					.name {
						.input {
							text-align: right;
							font-weight: bold;
							font-size: 40rpx;
							border: 1px solid #999;
							border-radius: 10rpx;
							padding: 20rpx;
							margin: 20rpx 0;

							&::placeholder {
								font-size: 40rpx;
							}
						}
					}
				}

				.title {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;

					text:nth-child(1) {
						font-size: 35rpx;
						font-weight: bold;
						color: #888;
					}

					text:nth-child(2) {
						font-size: 21rpx;
						color: #E0E0E0;
					}
				}
			}

			.scroll-view-box {
				flex: 1;

				.scrollView {
					.active {
						color: #F57605;
						font-weight: bold;
						font-size: 15px;
					}
				}
			}

		}
	}
</style>